<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>javascript DOM编程艺术 修正版</title>
</head>
<body>
<p>
    js
    平稳退化  加入js被禁止
    向后兼容  判断 标签是否在旧版本的浏览器中应用
    分离javascript onclick 放在js中执行
</p>
<ul id="imagegallery">
    <li><a href="img/wx.png" title="wx">wx</a></li>
    <li><a href="img/wx1.png" title="wx1">wx1</a></li>
    <li><a href="img/zf.png" title="zf">zf</a></li>
    <li><a href="img/qh.png" title="qh">qh</a></li>
</ul>

<img id="placeholder" src="img/wx.png" alt=""/>
<p id="para">choose a picture</p>
<script>
    //加载的问题
    window.onload = prepareGallery();
    function prepareGallery()
    {
        if(!document.getElementById){return false;}
        if(!document.getElementsByTagName){return false;}
        if(!document.getElementById('imagegallery')){return false;}
        var gallery = document.getElementById('imagegallery');
        var links = document.getElementsByTagName('a');
        for(var i=0;i<links.length;i++)
        {
            links[i].onclick=function()
            {
                return showPic(this)?false:true;
            }
        }
    }
    function showPic(whichPic)
    {
        if(!document.getElementById('placeholder')){return false;}
        var source = whichPic.getAttribute('href');
        var placeholder = document.getElementById('placeholder');
        if(placeholder.nodeName != 'IMG'){return false;}
        placeholder.setAttribute("src",source);

        if( document.getElementById('para'))
        {
            var text = whichPic.getAttribute('title')?whichPic.getAttribute('title'):'';
            var para = document.getElementById('para');
            para.firstChild.nodeValue = text;
        }
        return true;
    }
</script>
</body>
</html>